<template>
	<div>
		<div class="control">
			<!-- 车牌号 -->
			<div class="inputItem">
				<div class="title">车牌号</div>
				<div class="inputBox">
					<el-input v-model="carNumber" @keyup.enter.native="searchList">
					</el-input>
				</div>
			</div>
			<!-- 车型 -->
			<div class="inputItem">
				<div class="title">车型</div>
				<div class="inputBox">
					<el-select class="select" v-model="TypeSelected" placeholder="请选择" @change="changeVehicleType($event)">
						<el-option v-for="item in vehicleTypeData" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictLabel">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="inputItem">
				<div class="title">加入时间</div>
				<el-date-picker size="small" v-model="createTime" type="datetimerange" :picker-options="pickerOptions"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
			</div>

			<!-- 查询 -->
			<el-button type="primary" size="small" icon="el-icon-search" @click="searchList">查询</el-button>
			<el-button type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
		</div>
		<div class="main">
			<div class="list">
				<el-table :data="records" style="width: 100%" ref="table2">
					<el-table-column align="center" width="60px" prop="SerialNumber" label="序号">
					</el-table-column>
					<el-table-column prop="carFortyFive" align="center" label="车辆照片">
						<template slot-scope="scope">
							<el-image style="width: 65px; height: 48px;" :src="scope.row.carFortyFive"
								:preview-src-list="[scope.row.carFortyFive]">
							</el-image>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="numberplate" label="车牌号">
					</el-table-column>
					<el-table-column align="center" prop="vehicleType" label="车辆类型">
					</el-table-column>
					<el-table-column align="center" prop="brandModel" label="品牌型号">
					</el-table-column>
					<el-table-column align="center" prop="specification" label="规格">

					</el-table-column>
					<el-table-column align="center" prop="carriageLength" label="厢长">
						<template slot-scope="scope">
							<div>{{ scope.row.carriageLength == null ? '--' : scope.row.carriageLength + '米' }}</div>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="loadSide" label="载方">
						<template slot-scope="scope">
							<div>{{ scope.row.loadSide == null ? '--' : scope.row.loadSide + '方' }}</div>
						</template>

					</el-table-column>
					<el-table-column align="center" prop="loadCapacity" label="载重">
						<template slot-scope="scope">
							<div>{{ scope.row.loadCapacity == null ? '--' : scope.row.loadCapacity + '吨' }}</div>
						</template>

					</el-table-column>
					<el-table-column align="center" prop="vehicleHeight" label="车高">
						<template slot-scope="scope">
							<div>{{ scope.row.vehicleHeight == null ? '--' : scope.row.vehicleHeight + '米' }}</div>
						</template>

					</el-table-column>
					<el-table-column align="center" prop="certStatus" label="认证状态">
						<template slot-scope="scope">
							<div class="stateBtns">
								<el-button :class="scope.row.certStatus == 2 ? 'Pass' : 'noPass'" size="small">
									<i class="iconfont icon-dian"></i>
									{{ scope.row.certStatus == 2 ? "认证通过" : "不通过" }}
								</el-button>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="createTime" label="加入时间"></el-table-column>
					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<div>
								<el-button type="text" size="small" v-if="permissions.getDetails.perms != null"
									@click="showDetailBox(scope.row.vehicleId)">详情</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="paginationBox">
				<el-pagination @current-change="changePages($event)" class="pagination" background
					layout="slot,prev, pager, next" :total="data.total * 1" :page-size="data.size * 1" :pager-count="5">
					<template slot>
						<span style="
                  color: #686868;
                  font-size: 12px;
                  margin-right: 20px;
                  display: inline-block;
                ">共{{ data.total }}条,每页{{ data.size }}条</span>
					</template>
				</el-pagination>
			</div>
		</div>
		<!-- 详情 -->
		<div>
			<el-dialog custom-class="zdy_dialog" width="30%" :visible.sync="VisibleDetail">
				<div class="dialog_header" slot="title">
					<i class="iconfontcolor icon-dairenzhengcheliang"></i>
					<div class="infoBox">
						<div class="info">
							<span class="carNumber">{{ DetailsData.numberplate }}</span>
							<div class="tag" style="color: red;">认证失败</div>
						</div>
						<div class="text">车辆编号：{{ DetailsData.vehicleId }}</div>
					</div>
				</div>

				<div class="dialog_body">
					<!-- 车辆信息 -->
					<div class="title">
						<i class="iconfontcolor icon-xinxi"></i>
						<h3>车辆信息</h3>
						<div class="center_line"></div>
					</div>
					<el-descriptions :colon="true" :column="1" :contentStyle="{ fontSize: '12px', color: '#262626' }"
						:labelStyle="{ fontSize: '12px', color: '#939393' }">
						<el-descriptions-item label="车辆类型">{{
							DetailsData.vehicleType
						}}</el-descriptions-item>
						<el-descriptions-item label="品牌型号">{{
							DetailsData.brandModel
						}}</el-descriptions-item>
						<el-descriptions-item label="规格">{{
							DetailsData.specification
						}}</el-descriptions-item>
						<el-descriptions-item label="参数">
							<div style="display: flex; flex-direction: column">
								<div>
									厢长：{{ DetailsData.carriageLength == null ? '--' : DetailsData.carriageLength + '米'
									}}，载方：{{
	DetailsData.loadSide == null ? '--' : DetailsData.loadSide + '方'
}}，载重：{{ DetailsData.loadCapacity == null ? '--' : DetailsData.loadCapacity + '吨'
}}，车高：{{
	DetailsData.vehicleHeight == null ? '--' : DetailsData.vehicleHeight + '米'
}}
								</div>
								<div>#4.2（包含）米长以上需提供道路运输许可证</div>
							</div>
						</el-descriptions-item>
						<el-descriptions-item label="图片资料">
							<div class="picBox">
								<div class="pic_item">
									<el-image class="pic" :src="DetailsData.carFortyFive"
										:preview-src-list="[DetailsData.carFortyFive]">
									</el-image>
									<span>车辆照片</span>
								</div>
								<div class="pic_item">
									<el-image class="pic" :src="DetailsData.drivingLicenseCar"
										:preview-src-list="[DetailsData.drivingLicenseCar]">
									</el-image>
									<span>行驶证照片</span>
								</div>
							</div>
						</el-descriptions-item>
					</el-descriptions>
					<!-- 关联信息 -->
					<div class="title">
						<i class="iconfontcolor icon-xinxi"></i>
						<h3>关联信息</h3>
						<div class="center_line"></div>
					</div>
					<el-descriptions :colon="true" :column="1" :contentStyle="{ fontSize: '12px', color: '#262626' }"
						:labelStyle="{ fontSize: '12px', color: '#939393' }">
						<el-descriptions-item label="绑定司机">{{
							DetailsData.driverName || '无'
						}}</el-descriptions-item>
						<el-descriptions-item label="加入车队">{{
							DetailsData.fleetName || '无'
						}}</el-descriptions-item>
					</el-descriptions>
					<!--认证信息  -->
					<div class="title">
						<i class="iconfontcolor icon-xinxi"></i>
						<h3>认证信息</h3>
						<div class="center_line"></div>
					</div>
					<el-descriptions :colon="true" :column="1" :contentStyle="{ fontSize: '12px', color: '#262626' }"
						:labelStyle="{ fontSize: '12px', color: '#939393' }">
						<el-descriptions-item label="认证时间">{{
							AuditTime
						}}</el-descriptions-item>
						<el-descriptions-item label="认证人">{{
							authenticator
						}}</el-descriptions-item>
						<el-descriptions-item label="认证失败"><span style="color:red">{{
							yuanyin
						}}</span></el-descriptions-item>
					</el-descriptions>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";

import httpApi from "@/http";

export default {
	// props: {
	//   permissions: {
	//     typeof: Object,
	//     default: {},
	//   },
	// },

	data() {
		return {
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
			createTime: [], //加入时间
			carNumber: "", //当前搜索的车牌号值
			TypeSelected: "", //当前选择 车型
			stateSelected: "",
			records: [], //列表数据
			data: {
				total: "",
				size: "",
				pages: "",
			},
			VisibleDetail: false, //详情弹窗是否显示
			vehicleTypeData: [], //车型 数组
			DetailsData: {}, //详情数据
			AuditTime: "", //认证时间
			authenticator: "", //认证人
			pageCurrent: 1, //当前页
			pageSize: "10", //每页10条
			permissions: {},
			yuanyin: ""
		};
	},
	created() {
		this.permissions = JSON.parse(sessionStorage.getItem('permissions'))
	},
	methods: {
		getSerialNumber() {
			// 前端解决序号
			this.records.forEach((item, i) => {
				let num = i + 1 + Number(this.pageSize) * (this.pageCurrent - 1)
				item.SerialNumber = num;
			});
		},

		getList() {
			let params = {
				portAddress: "PLATFORM",
				auditStatus: "0",
				current: this.pageCurrent,
				size: this.pageSize,
				type: '1', //不通过车辆状态
			};
			// console.log(params);
			httpApi.vehicleApi.queryListUn(params).then((res) => {
				this.records = res.data.data.records;
				this.getSerialNumber();
				this.data = res.data.data;

				// this.records.forEach((item, i) => {
				//   this.records[i].vehicleHeight = item.vehicleHeight + "米";
				//   this.records[i].carriageLength = item.carriageLength + "米";
				//   this.records[i].loadSide = item.loadSide + "方";
				//   this.records[i].loadCapacity = item.loadCapacity + "吨";
				// });
			});
		},
		getvehicleType() {
			httpApi.vehicleApi.getAllVehicleType().then((res) => {
				// console.log("车型种类", res.data.data);
				this.vehicleTypeData = res.data.data;
			});
		},

		showDetailBox(vehicleId) {
			this.VisibleDetail = true;
			httpApi.vehicleApi
				.getWaitAuditDetails({
					vehicleId: vehicleId
				})
				.then((res) => {
					this.DetailsData = res.data.data;
					// console.log('详情数据', this.DetailsData);
					this.AuditTime =
						this.DetailsData.auditVoList[0].auditVoList[0].auditTime;
					this.authenticator =
						this.DetailsData.auditVoList[0].auditVoList[0].auditUser;
					this.yuanyin =
						this.DetailsData.auditVoList[0].auditVoList[0].auditFailReason;
				});
		},
		changeVehicleType(value) {
			this.TypeSelected = value;
		},
		searchList() {
			this.pageCurrent = 1;
			let params = {
				portAddress: "PLATFORM",
				auditStatus: "0",
				type: '1', //不通过车辆状态
				numberplate: this.carNumber,
				vehicleType: this.TypeSelected,
				current: this.pageCurrent,
				size: this.pageSize,
				startTime: this.createTime != null ? this.createTime[0] : '', //开始时间
				endTime: this.createTime != null ? this.createTime[1] : '', //结束时间
			};
			// console.log('参数', params);
			httpApi.vehicleApi.queryList(params).then((res) => {
				// console.log('查询结果', res);
				this.records = res.data.data.records;
				this.data = res.data.data;
				this.getSerialNumber()
			});
		},
		// 清空
		CleanUp() {
			this.carNumber = "";
			this.stateSelected = "";
			this.TypeSelected = "";
			this.createTime = []
			this.searchList();
		},
		changePages(val) {
			this.pageCurrent = val;
			// console.log(val);
			this.getList();
		},
		// 记录滚动距离
		scrollEvent(res) {
			this.$route.meta.scrollTop = res.target.scrollTop
		},
	},
	activated() {
		//组件激活时监听表格滚动条位置,
		this.$refs.table2.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
		// 激活设置滚动位置
		this.$refs.table2.bodyWrapper.scrollTop = this.$route.meta.scrollTop
	},
	beforeRouteLeave(to, from, next) {
		// 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
		this.$refs.table2.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
		next()
	},


	mounted() {
		this.getvehicleType();

		this.getList();
	},
};
</script>

<style lang="scss" scoped>
.control {
	height: 76px;
	width: 100%;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 0 29px;


	.inputItem {
		display: flex;
		align-items: center;
		margin-right: 23px;

		>.title {
			color: #262626;
			font-size: 12px;
			margin-right: 7px;
		}

		>.inputBox {
			width: 160px;

			.select {
				::v-deep .el-input__icon {
					line-height: 0;
				}
			}

			::v-deep .el-input__inner {
				height: 32px;
				font-size: 12px;
			}

			::v-deep .el-input__inner::placeholder {
				color: #c3c3c3;
				font-size: 12px;
			}
		}
	}
}

.main {
	width: 100%;
	height: calc(100vh - 267px);
	background-color: #fff;


	.list {
		height: calc(100% - 48px);
		padding: 0 30px;

		::v-deep .el-table__body-wrapper {
			height: calc(100vh - 362px);
			overflow-y: scroll;
		}

		// 表头样式
		::v-deep .el-table__header th {
			background-color: #f0f6fd;
			color: #262626;
			font-size: 12px;
			font-weight: bold;
			text-align: center;

			// 表 body的td
			::v-deep .el-table__body td {
				color: #595959;
				font-size: 12px;
			}
		}

		.stateBtns {
			height: 30px;
			margin: 0 auto;

			::v-deep .el-button {
				font-size: 12px;
				border: none;
				width: 76px;
				height: 30px;
				margin: 0 auto;
				box-sizing: border-box;
			}

			.icon-dian {
				font-size: 12px;
			}

			.Pass {
				background-color: #ecf5fe;
				color: #1890ff;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10px 10px 9px;
			}

			.noPass {
				background-color: #fde8e9;
				color: #f7555d;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.paginationBox {
		border-top: 1px solid #f0f0f0;
		width: 100%;
		background-color: #fff;
		display: flex;
		height: 48px;
		align-items: center;
		padding: 0 30px;

		.pagination {
			margin-left: auto;
		}
	}
}
</style>

<!-- 详情弹窗 -->
<style lang="scss">
.zdy_dialog {
	height: 100vh;
	margin: 0 !important;
	float: right;

	.dialog_header {
		display: flex;

		.icon-dairenzhengcheliang {
			font-size: 43px;
			color: #1890ff;
			margin-right: 12px;
		}

		.infoBox {
			>.info {
				display: flex;
				align-items: center;
				margin-bottom: 7px;

				>.carNumber {
					font-size: 18px;
					color: #262626;
					font-weight: bold;
					margin-right: 8px;
				}

				>.tag {
					width: 60px;
					height: 18px;
					background-color: #ecf5fe;
					font-size: 10px;

					text-align: center;
					line-height: 18px;
				}
			}

			>.text {
				color: #939393;
				font-size: 12px;
				margin-bottom: 10px;
			}
		}
	}

	.dialog_body {
		>.title {
			height: 60px;
			display: flex;
			align-items: center;

			>.icon-xinxi {
				font-size: 16px;
				margin-right: 7px;
			}

			>h3 {
				font-size: 14px;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #262626;
			}

			.center_line {
				flex: 1;
				height: 1px;
				background-color: #f0f0f0;
				margin-left: 14px;
			}
		}

		.picBox {
			display: flex;

			.pic_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 32px;

				.pic {
					width: 109px;
					height: 71px;
				}

				>span {
					color: #666666;
					font-size: 12px;
				}
			}
		}
	}
}
</style>